<template>
	<div class="menuPanel">
		<el-row>
			<el-col :span="24" style="line-height: 30px;">主诉</el-col>
		</el-row>
		<div class="menuContent">
			<el-row>
		<!--主诉栏-->
				<el-col :span="24" style="text-align: left;">
			    <el-menu :unique-opened="true" :default-active="openItem">
			      <el-submenu :index="'menu'+index" :key="index" v-for="(item,index) in menus">
			        <template slot="title" class="menu-title">
			          <i :class='iconFonts[item.systemCode]' style="font-size:16pt;"></i>&nbsp;
			          <span>{{item.systemName}}</span>
			        </template>
			        <el-menu-item-group>
			          <el-menu-item v-show="ageType=='成人'&&menu.complaintType=='CR'||ageType==''||menu.complaintType=='ALL'||ageType!='成人'&&menu.complaintType=='XE'" class="menu-item" @click="getSymptoms(menu)" :id="'item'+menu.complaintId" :index="'item'+menu.complaintId" :key="inde" v-for="(menu,inde) in item.complaintList"><i :class='iconFonts[item.systemCode]'></i>&nbsp;<span>{{menu.complaintName}}</span></el-menu-item>
			        </el-menu-item-group>
			      </el-submenu>
			    </el-menu>
				</el-col>
			</el-row>
		</div>
	</div>
</template>
<script type="text/javascript">
import bus from '@/eventBus.js'
	export default{
		name: 'MainPanel',
		data(){
			return {
				openItem:"",
				menus:[{
					systemCode: '999',
					systemName: '系统名称',
					complaintList:[{
						complaintCode: '999',
						complaintName: '主诉内容'
					}]
				}],
				iconFonts:{
					"2":"iconfont icon-huxixitong",
					"3":"iconfont icon-xieyexitong",
					"999":"el-icon-more-outline"
				},
			}
		},
		methods:{
			getSymptoms:function(menu){
				//加载症状栏内容
				bus.$emit('querySymptoms',menu);
				//加载可能疾病栏内容
				bus.$emit('queryMayDisease',menu);
			},
			clickMenu:function(elID){
				this.openItem="item"+elID;
				console.log("需要打开的主诉："+this.openItem);
				$("#item"+elID).trigger("click");
			} 
		},
		computed:{
			recordData(){
				return this.$store.state.recordData;
			},
			ageType(){
				return this.$store.state.ageType;
			}
		},
     mounted(){
                var that=this;
                $.ajax({
                    type:"get",
                    url:CONST.url+"getSystemInfo",
                    success:function(result){
                        if (result.code==0||result.code=='0') {
                        	that.menus = result.data
                        }else{
                        	that.$notify.error({
					          title: '错误',
					          message: '主诉菜单内容请求失败'
					        });
                        }
                    },
                    error:function(){
                    	that.$notify.error({
					          title: '错误',
					          message: '网络异常，主诉菜单内容请求失败'
					        });
                    }
                });
        },
        watch:{
        	recordData:{
				handler(curVal,oldVal){
					//清空症状栏内容
					bus.$emit('querySymptoms',"none");
					//清空可能疾病栏内容
					bus.$emit('queryMayDisease',"none");
					var complaintId="";
					this.menus.forEach(function(menu){
						menu.complaintList.forEach(function(complaint){
							if (complaint.complaintCode == curVal.recordMainCode) {
								complaintId = complaint.complaintId;
							}
						});
					});
					this.clickMenu(complaintId);
					this.$store.commit({
						type: "setReSymptomDone",
						reSymptomDone: "RESEND"
					});
				},
				deep:true
			}
        }
	}
</script>
<style type="text/css" scoped>
	.menuPanel{
		height: 700px;
		border: 1px solid #cccccc;
		background-color: #ffffff;
	}
	.menuContent{
		overflow: auto;
		height: 668px;
	}
	.menu-item{
		min-width: 150px !important;
		height: 40px;
		line-height: 40px;
		padding-right: 0px;
		padding-left: 25px !important;
	}
	.el-submenu{
		border-bottom: 1px solid #eeeeee;
	}
</style>